<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
  >
    <el-form-item label="描述：" prop="alt">
      <el-input v-model="ruleForm.alt" />
    </el-form-item>
    <el-form-item label="链接：" prop="link">
      <el-input v-model="ruleForm.link" />
    </el-form-item>
    <el-form-item label="上传图片：" prop="link">
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :http-request="httpRequest"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >创建</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { createBanner } from "@/api/api";
export default {
  data() {
    return {
      ruleForm: {
        alt: "",
        link: "",
        img: "",
      },
      rules: {
        alt: [{ required: true, message: "请输入描述", trigger: "blur" }],
        link: [{ required: true, message: "请输入链接地址", trigger: "blur" }],
      },
      imageUrl: "",
    };
  },
  methods: {
    httpRequest(res) {
      // 图片回显
      this.imageUrl = URL.createObjectURL(res.file);
      // 把图片处理成base64格式上传
      this.getBase64(res.file).then((res) => {
        this.ruleForm.img = res;
      });
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        let reder = new FileReader();
        let fileResult = "";
        reder.readAsDataURL(file);

        // 处理开始
        reder.onload = () => {
          fileResult = reder.result;
        };
        reder.onerror = (error) => {
          reject(error);
        };
        reder.onloadend = () => {
          resolve(fileResult);
        };
      });
    },
    submitForm() {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (valid) {
          const params = {
            // 传照片
            img: this.ruleForm.img,
            alt: this.ruleForm.alt,
            link: this.ruleForm.link,
          };
          // 创建照片
          await createBanner(params);
          // 清空创建轮播图的位置的信息
          this.resetForm();
        } else {
          this.$message.error("创建失败");
        }
      });
    },
    resetForm() {
      this.imageUrl = "";
      this.$refs.ruleFormRef.resetFields();
    },
  },
  components: {
    Plus,
  },
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
